import { Button, Col, Form, Input, Row, Select, theme, Divider, Radio, Table, Space, Tag, Checkbox, Pagination,DatePicker ,Modal } from 'antd';
import "./index.scss";
import http from '../../../utils/fetchHttp'
import { useEffect, useState, Component } from 'react';
// import imgurl from '../../../assets/images/bgimg.webp'
// 第一个表格

const TableDetail = () => {
    const [data, setData] = useState([])
    let user_id = JSON.parse(sessionStorage.getItem('userInfo'))[0].user_id
    useEffect(() => {
        console.log(user_id);
        http({
            url: '/user/getUserShopAddress',
            method: 'post',
            data: {
                user_id
            }
        }).then((res => {
            console.log(res);
            if (res.code == 200) {
                setData(res.data.map((item) => {
                    if (item.adrress_default == '0') {
                        item.adrress_default = "是"
                    } else {
                        item.adrress_default = "否"
                    }
                    return {
                        address_id: item.address_id,
                        address_username: item.address_username,
                        address_phone: item.address_phone,
                        address_detailed: item.address_detailed,
                        address_code: item.address_code,
                        address_default: item.adrress_default
                    }
                }))
            }

        }))
    }, [])
    const columns = [
        {
            title: "姓名",
            dataIndex: "address_username",
            key: "address_username",
        },
        {
            title: "手机号",
            dataIndex: "address_phone",
            key: "address_phone",
        },
        {
            title: "详细地址",
            dataIndex: "address_detailed",
            key: "address_detailed",
        },
        {
            title: "邮政编码",
            dataIndex: "address_code",
            key: "address_code",
        },
        {
            title: "默认地址",
            dataIndex: "address_default",
            key: "address_default",
        }
    ];
    //    
    // 选择的数组
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === "Disabled User",
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    return (
        <Table
            rowKey={(record) => record.address_id}
            rowSelection={{
                type: "checkbox",
                ...rowSelection,
            }}
            pagination={false}
            columns={columns}
            dataSource={data}
        />
    );
};
//第二个表格

const TableDetail1 = () => {
  const [data1,setData1]=useState([])
  const [form2] = Form.useForm();
  const [orderId,setOrderId]=useState('')
  const [orStartTime,setOrStartTime]=useState('')
  const [orPrice,setOrPrice]=useState('')
  const [orState,setOrState]=useState('')
  const [user_email,setUser_email]=useState('')

 //模态框
 const [lookOpen, setlookOpen] = useState(false);
 const [confirmLoading, setConfirmLoading] = useState(false);
 //表单默认值
 form2.setFieldsValue({
  orderId,
     user_email,
     orStartTime,
     orPrice,
     orState
})
 // 查看
 const handleCancel = () => {
  console.log('Clicked cancel button');
  setlookOpen(false);
};
  const showRow=(record)=>{
    console.log('查看',record);
    setOrderId(record.orderId)
    setOrPrice(record.orPrice)
    setOrStartTime(record.orStartTime)
    setOrState(record.orState)
    setUser_email(record.user_email)
    setlookOpen(true);
}
  useEffect(()=>{
    http({
      url:'/user/getUserOrder',
      method: 'post',
      data:{
          user_id:JSON.parse(sessionStorage.getItem('userInfo'))[0].user_id
      }
    }).then((res=>{
        console.log(res);
        if(res.code==200){
          
          setData1(res.data.map((item)=>{
            if(item.orState==0){
              item.orState="代付款"
            }else if(item.orState==1){
              item.orState="待确定"
            }else if(item.orState==2){
              item.orState="代发货"
            }else if(item.orState==3){
              item.orState="已发货"
            }else if(item.orState==4){
              item.orState="已完成"
            }else if(item.orState==5){
              item.orState="待处理"
            }
            return {
              user_email:JSON.parse(sessionStorage.getItem('userInfo'))[0].user_email,
              orderId:item.orderId,
              orStartTime:item.orStartTime,
              orPrice:item.orPrice,
              orState:item.orState
            }
          }))
        }
    
    }))
  },[])
    const columns = [
      {
        title: "订单编号",
        dataIndex: "orderId",
        key: "orderId",
      },
      {
        title: "提交时间",
        dataIndex: "orStartTime",
        key: "orStartTime",
      },
      {
        title: "用户账号",
        dataIndex: "user_email",
        key: "user_email",
      },
      {
        title: "订单金额",
        dataIndex: "orPrice",
        key: "orPrice",
      },
      {
        title: "订单状态",
        dataIndex: "orState",
        key: "orState",
      },
      {
        title: "操作",
        key: "action",
        render: (_, record) => (
          <Space size="middle" key={record.user_id}>
            <a
              onClick={() => {
                showRow(record);
              }}
            >
              查看订单
            </a>
          </Space>
        ),
      },
    ];
    // 选择的数组
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === "Disabled User",
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    return (
      <div>
        <Table
        rowKey={(record) => record.user_id}
        rowSelection={{
          type: "checkbox",
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data1}
        pagination={{
          pageSize: 4,
        }}
      />
      <Modal  forceRender 
                title="更改用户"
                open={lookOpen}
                confirmLoading={confirmLoading}
                footer={[
                      <Button key='cancel' htmlType="button" onClick={handleCancel} style={{ marginLeft: "10px" }}>
                        取消
                      </Button>
                  ]}
            >
                <Form
                    form={form2}
                    labelCol={{
                    span: 4,
                    }}
                    wrapperCol={{
                    span: 14,
                    }}
                    layout="horizontal"
                    style={{
                    maxWidth: 600,
                    }}
                    disabled={true}
                >
                    
                    <Form.Item label="订单编号" name='orderId' initialValue={orderId}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="提交时间" name='orStartTime' initialValue={orStartTime}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="用户账号" name='user_email' initialValue={user_email}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="订单金额" name='orPrice' initialValue={orPrice}>
                    <Input />
                    </Form.Item>
                    <Form.Item label="订单状态" name='orState' initialValue={orState}>
                    <Input />
                    </Form.Item>
                </Form>
            </Modal>   
      </div>
    );
  };




const userDetails = () => {
    const [userinfo, setuserinfo] = useState(JSON.parse(sessionStorage.getItem('userInfo')))
    useEffect(() => {
        setuserinfo(JSON.parse(sessionStorage.getItem('userInfo')))
    }, [])
    const { token } = theme.useToken();
    const listStyle = {
        textAlign: "center",
        background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        marginTop: 16,
    };
    return (
        <div className='user'>
            <div className='userBox'>
                <Row className='title'>
                    <Col span={24}>
                        <h3>基本信息</h3>
                    </Col>
                </Row>
                <Row gutter={0}>
                    <Col className="infostyle" span={5}>
                        <div>
                            {/* <img src={imgurl} /> */}
                            <img src={`/api${userinfo[0].user_img}`} />
                            <p>{userinfo[0].user_name}</p>
                        </div>
                    </Col>
                    <Col className="infostyle" span={5}>
                        <div className="userDetail">账号</div>
                        <div className="userDetail">名称</div>
                        <div className="userDetail">手机号</div>
                        <div className="userDetail">性别</div>
                    </Col>
                    <Col className="infostyle" span={5}>
                        <div className="userDetail1">{userinfo[0].user_email}</div>
                        <div className="userDetail1">{userinfo[0].user_name}</div>
                        <div className="userDetail1">{userinfo[0].user_phone}</div>
                        <div className="userDetail1">{userinfo[0].user_sex}</div>
                    </Col>
                    <Col className="infostyle" span={4}>
                        <div className="userDetail">生日</div>
                        <div className="userDetail">地区</div>
                        <div className="userDetail">创建时间</div>
                        <div className="userDetail"></div>
                    </Col>
                    <Col className="infostyle" span={5}>
                        <div className="userDetail1">{userinfo[0].user_birthday}</div>
                        <div className="userDetail1">{userinfo[0].user_address}</div>
                        <div className="userDetail1">{userinfo[0].user_creattime
                        }</div>
                        <div className="userDetail1"></div>
                    </Col>
                </Row>
            </div>
            <div>
                <div style={listStyle}>
                    <div
                        style={{
                            lineHeight: "2rem",
                            display: "flex",
                            alignItems: "baseline",
                            justifyContent: "space-between",
                            height: "2rem",
                            padding: "1rem",
                        }}
                    >
                        <h3>收货地址</h3>
                    </div>

                    <div style={{ lineHeight: "20rem" }}>
                        <Divider />
                        <TableDetail />
                    </div>
                </div>
            </div>
            <div>
                <div style={listStyle}>
                    <div
                        style={{
                            lineHeight: "2rem",
                            display: "flex",
                            alignItems: "baseline",
                            justifyContent: "space-between",
                            height: "2rem",
                            padding: "1rem",
                        }}
                    >
                        <h3>订单记录</h3>
                    </div>

                    <div style={{ lineHeight: "20rem" }}>
                        <Divider />
                        <TableDetail1 />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default userDetails;
